<!-- 
    计算属性里的内容只会执行一次
    所以就意味着它是有缓存的，因此计算属性的效率其实更高
 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <h1>{{totalPrice}}</h1>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app',
                data: {
                    books: [
                        {id: 110, name: 'java', price: 119},
                        {id: 111, name: 'C', price: 150},
                        {id: 112, name: 'C++', price: 139},
                        {id: 113, name: 'scale', price: 169},
                    ]
                },
                computed: {
                    //计算一下这些书的总价格
                    totalPrice: function() {
                        let result = 0
                        for(let obj of this.books) {
                            result += obj.price
                        }
                        return result
                    }
                },
            })
        </script>
    </body>
</html>